<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<LINK rel="Bookmark" href="../images/favicon.ico">
<script type="text/javascript" src="${path }/resource/js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="${path }/resource/js/ajaxfileupload.js"></script>
<script type="text/javascript" src="${path }/resource/js/mytools.js"></script>
<link rel="stylesheet" href="${path }/resource/bootstrap/css/bootstrap.min.css" />
<title>EXCEL示例</title>
</head>
<div class="ibox-content">
	<form class="form-inline" id="dataform">
		<div class="form-group">
			<label class="col-sm-2 control-label">上传文件</label>
				<input onclick="importChances()" class="input-text upload-url radius form-control" type="text" id="showFileName"/> 
					<!-- <a onclick="importChances()" class="btn btn-primary radius"> 
					<i class="fa fa-cloud-upload"></i> 浏览文件 </a>  -->
				<input type="file" name="file" style="display: none;"   id="chanceUploadId" onchange="onchangeFile()" />
				<button type="button" onclick="submitData()" disabled="disabled" id="subup" class="btn btn-success radius">上传</button>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="${path }/developer/DownAndUpLoad/downLoadFile">下载</a>
		</div>
	</form>
	
</div>
<div class="ibox-content">
	<div style="width: 100%;overflow: scroll;" id="tablediv" >	

	</div>	
</div>
	
<script type="text/javascript">
	//绑定文件的点击事件
	function importChances(){
		$("#chanceUploadId").click();
	}
	//选中文件，文件名字显示在文本框中
	function onchangeFile(){
		 $("#showFileName").val($("#chanceUploadId").val());
		 $("#subup").attr("disabled", false); 
	}
	//提交文件
	function submitData(){
		$("#subup").attr("disabled", true);
		$("#tablediv").empty();
		$("#tablediv").append("<table id='table1' class='table table-bordered table-hover table-condensed'><thead><tr></tr></thead>");
		$.ajaxFileUpload({
			url : "${path }/developer/DownAndUpLoad/importData",
			type : "POST",
			secureuri : false,// 一般设置为false
			fileElementId : "chanceUploadId",
			dataType : "json",
			success : function(data) {
				$("#table1 thead tr").append("<th data-name='id'>id</th>");
				var colnum="";
				for(var i in data.rows[0]){
					colnum+=i+",";
        			$("#table1 thead tr").append("<th data-name='"+i+"' >"+i+"</th>");
        		}
				inittable(colnum);
        	}
			});
		}
		function inittable(colnum){
		console.log(colnum);
		var mjs  =	mytooljs.initTable({  
			idSelecter:"#table1",
			sendurl:"${path}/developer/DownAndUpLoad/showImpData?colnum="+colnum , //求数据的地址
			pagesize:10//分页大小
			});
		}
		
</script>
</body>
</html>